<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryFormRef"
			:inline="true"
			:model="queryParams"
			label-width="70px"
		>
			<el-form-item label="角色名称" prop="roleName">
				<el-input
					v-model="queryParams.roleName"
					clearable
					placeholder="请输入角色名称"
					style="width: 240px"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="权限字符" prop="roleKey">
				<el-input
					v-model="queryParams.roleKey"
					clearable
					placeholder="请输入权限字符"
					style="width: 240px"
					@change="handleQuery()"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select
					v-model="queryParams.status"
					clearable
					placeholder="角色状态"
					style="width: 240px"
					@change="handleQuery()"
				>
					<el-option
						v-for="dict in statusOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间" style="font-weight: bold">
				<el-date-picker
					v-model="dateRange"
					clearable
					end-placeholder="结束日期"
					format="YYYY-MM-DD"
					range-separator="-"
					start-placeholder="开始日期"
					style="width: 240px"
					type="daterange"
					value-format="YYYY-MM-DD"
					@change="handleQuery()"
				></el-date-picker>
			</el-form-item>
			<form-search @reset="resetQuery()" @search="handleQuery()" />
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['system:role:add']"
					icon="plus"
					plain
					size="small"
					type="primary"
					@click="handleAdd"
				>新增
				</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['system:role:export']"
					icon="download"
					plain
					size="small"
					type="warning"
					@click="handleExport"
				>导出
				</el-button
				>
			</el-col>
			<el-col v-if="!single" :span="1.5">
				<el-button
					v-hasPermi="['system:role:edit']"
					:disabled="single"
					icon="edit"
					plain
					size="small"
					type="success"
					@click="handleUpdate"
				>修改
				</el-button
				>
			</el-col>
			<el-col v-if="!multiple" :span="1.5">
				<el-button
					v-hasPermi="['system:role:remove']"
					:disabled="multiple"
					:loading="exportLoading"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="handleDelete"
				>删除
				</el-button
				>
			</el-col>
			<!-- prettier-ignore -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>

		<el-table ref="pageTable" v-loading="loading" :data="roleList" border style="width: 100%"
				  @selection-change="handleSelectionChange">
			<!-- prettier-ignore -->
			<el-table-column :selectable="checkSelected" align="center" type="selection" width="55" />
			<!-- prettier-ignore -->
			<el-table-column align="center" label="序号" type="index" width="100">
				<template #default="scope">
					<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<!-- prettier-ignore -->
			<el-table-column :show-overflow-tooltip="true" label="角色名称" prop="roleName" width="120" />
			<!-- prettier-ignore -->
			<el-table-column :show-overflow-tooltip="true" label="权限字符" prop="roleKey" width="200" />
			<!-- prettier-ignore -->
			<el-table-column label="显示顺序" prop="roleSort" width="150" />
			<!-- prettier-ignore -->
			<el-table-column label="备注信息" prop="remark" width="200" />
			<el-table-column align="center" label="状态" width="150">
				<template #default="scope">
					<!--默认active颜色#1890FF -->
					<!-- prettier-ignore -->
					<status-switch v-if="scope.row.roleId !== '1'" :status-data.sync="scope.row.status"
								   @handleChange="handleStatusChange($event,scope.row)" />
					<!-- prettier-ignore -->
					<status-switch v-else :disabled="true" :status-data.sync="scope.row.status" />
				</template>
			</el-table-column>
			<!-- prettier-ignore -->
			<el-table-column align="center" label="创建时间" prop="createTime" width="200">
				<template #default="scope">
					<span>{{ dateTimeSub(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<!--			<el-table-column align="center" label="修改时间" prop="updateTime" width="200">-->
			<!--				<template #default="scope">-->
			<!--					<span>{{ dateTimeSub(scope.row.updateTime) }}</span>-->
			<!--				</template>-->
			<!--			</el-table-column>-->
			<el-table-column
				align="center"
				label="操作"
			>
				<template #default="scope">
					<el-link
						v-if="scope.row.roleId !== '1'"
						v-hasPermi="['system:role:edit']"
						:underline="false"
						class="el-link-spacing"
						icon="edit"
						size="small"
						type="primary"
						@click="handleUpdate(scope.row)"
					><span class="table_link_text">修改</span></el-link
					>
					<el-link
						v-if="scope.row.roleId !== '1'"
						v-hasPermi="['system:role:edit']"
						:underline="false"
						class="el-link-spacing"
						icon="circle-check"
						size="small"
						type="primary"
						@click="handleDataScope(scope.row)"
					><span class="table_link_text">数据权限</span></el-link
					>
					<el-link
						v-if="scope.row.roleId !== '1'"
						v-hasPermi="['system:role:remove']"
						:underline="false"
						class="el-link-spacing"
						icon="delete"
						size="small"
						type="danger"
						@click="handleDelete(scope.row)"
					><span class="table_link_text">删除</span></el-link
					>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="getList"
		/>

		<!-- 添加或修改角色配置对话框 -->
		<el-dialog
			v-model="open"
			:title="title"
			append-to-body
			width="30%"
			@close="cleanSelect()"
		>
			<el-form
				ref="formRef"
				:model="form"
				:rules="rules"
				label-width="90px"
			>
				<el-row>
					<el-col :span="12">
						<el-form-item label="角色名称" prop="roleName">
							<el-input
								v-model="form.roleName"
								placeholder="请输入角色名称"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="权限字符" prop="roleKey">
							<el-input
								v-model="form.roleKey"
								placeholder="请输入权限字符"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色顺序" prop="roleSort">
							<el-input-number
								v-model="form.roleSort"
								:min="0"
								controls-position="right"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色状态">
							<el-radio-group v-model="form.status">
								<el-radio
									v-for="dict in statusOptions"
									:key="dict.dictValue"
									:label="dict.dictValue"
								>{{ dict.dictLabel }}
								</el-radio
								>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="菜单权限">
							<!-- prettier-ignore -->
							<el-checkbox
								v-model="menuExpand"
								@change="handleCheckedTreeExpand($event, 'menu')"
							>展开/折叠
							</el-checkbox
							>
							<!-- prettier-ignore -->
							<el-checkbox
								v-model="menuNodeAll"
								@change="handleCheckedTreeNodeAll($event, 'menu')"
							>全选/全不选
							</el-checkbox
							>
							<!-- prettier-ignore -->
							<el-checkbox
								v-model="form.menuCheckStrictly"
								@change="handleCheckedTreeConnect($event, 'menu')"
							>父子联动
							</el-checkbox
							>
							<el-tree
								ref="menuRef"
								:check-strictly="!form.menuCheckStrictly"
								:data="menuOptions"
								:props="defaultProps"
								class="tree-border"
								empty-text="加载中，请稍后"
								node-key="id"
								show-checkbox
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注">
							<el-input
								v-model="form.remark"
								:autosize="{ minRows: 4 }"
								placeholder="请输入内容"
								type="textarea"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<!-- prettier-ignore -->
					<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="open = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 分配角色数据权限对话框 -->
		<el-dialog
			v-model="openDataScope"
			:title="title"
			append-to-body
			width="20%"
			@close="cleanSelect()"
		>
			<el-form :model="form" label-width="80px">
				<el-form-item label="角色名称">
					<el-input v-model="form.roleName" :disabled="true" />
				</el-form-item>
				<el-form-item label="权限字符">
					<el-input v-model="form.roleKey" :disabled="true" />
				</el-form-item>
				<el-form-item label="权限范围">
					<el-select
						v-model="form.dataScope"
						@change="dataScopeSelectChange"
					>
						<el-option
							v-for="item in dataScopeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-show="form.dataScope == 2" label="数据权限">
					<el-checkbox
						v-model="deptExpand"
						@change="handleCheckedTreeExpand($event, 'dept')"
					>展开/折叠
					</el-checkbox
					>
					<el-checkbox
						v-model="deptNodeAll"
						@change="handleCheckedTreeNodeAll($event, 'dept')"
					>全选/全不选
					</el-checkbox
					>
					<el-checkbox
						v-model="form.deptCheckStrictly"
						@change="handleCheckedTreeConnect($event, 'dept')"
					>父子联动
					</el-checkbox
					>
					<el-tree
						ref="deptRef"
						:check-strictly="!form.deptCheckStrictly"
						:data="deptOptions"
						:props="defaultProps"
						class="tree-border"
						default-expand-all
						empty-text="加载中，请稍后"
						node-key="id"
						show-checkbox
					></el-tree>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<!-- prettier-ignore -->
					<el-button :loading="buttonLoading" type="primary" @click="submitDataScope">确 定</el-button>
					<el-button @click="openDataScope = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="Role" setup>
import Role from "@/api/request/system/role/role";
// prettier-ignore
const {
	menuRef,
	loading,
	buttonLoading,
	exportLoading,
	deptRef,
	single,
	multiple,
	showSearch,
	total,
	roleList,
	title,
	open,
	openDataScope,
	menuExpand,
	menuNodeAll,
	deptExpand,
	deptNodeAll,
	dateRange,
	statusOptions,
	dataScopeOptions,
	menuOptions,
	deptOptions,
	queryParams,
	form,
	defaultProps,
	rules,
	formRef,
	queryFormRef,
	getList,
	handleStatusChange,
	handleQuery,
	resetQuery,
	handleSelectionChange,
	handleCheckedTreeExpand,
	handleCheckedTreeNodeAll,
	handleCheckedTreeConnect,
	handleAdd,
	handleUpdate,
	dataScopeSelectChange,
	handleDataScope,
	submitForm,
	cleanSelect,
	submitDataScope,
	handleDelete,
	handleExport,
	pageTable,
	checkSelected,
} = Role();
</script>
